<template>
  <div class="rightBodyContent" ref="applyHeight">
    <div class="rightBodyContent-in">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :name="index+1" v-for="(item,index) in downTiitle" :key="item.id">
          <template slot="title">
            <i class="header-icon el-icon-s-data"></i>{{ item.name }}
          </template>
          <div class="down-body">
            <div class="down-header-search mt-10">
              <div class="search-line">
                <div class="search-list">
                  <div class="search-list-left" v-if="activeName==1 || activeName==3">
                    <span class="search-list-title">月份：</span>
                    <div class="search-list-content">
                      <el-date-picker
                          v-model="monthValue"
                          size="small"
                          type="month"
                          format="yyyyMM"
                          value-format="yyyyMM"
                          placeholder="选择月份">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="search-list-left" v-if="activeName==2">
                    <span class="search-list-title">性别：</span>
                    <div class="search-list-content">
                      <el-select clearable v-model="sexValue" placeholder="请选择性别" size="small">
                        <el-option
                            v-for="item in sexList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <el-select placeholder="学年" v-if="activeName==2" v-model="semester_id" size="small"
                             class="w-140 ml-10">
                    <el-option :label="item.year" :value="item.id" v-for="(item, index) in yearList"
                               :key="index"></el-option>
                  </el-select>
                  <div class="search-list-left" v-if="activeName==3 || activeName==4">
                    <span class="search-list-title">班级：</span>
                    <div class="search-list-content">
                      <component
                          v-bind:is="item.propertyType"
                          :property.sync="item"
                          v-for="(item, index) in getPower"
                          :key="index"
                          @updateVal="updateVal"
                      ></component>
                    </div>
                  </div>
                  <div class="search-list-left" v-if="activeName==4">
                    <span class="search-list-title">记录状态：</span>
                    <div class="search-list-content">
                      <el-select clearable v-model="statusValue" placeholder="请选择性别" size="small">
                        <el-option
                            v-for="item in statusTearchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="search-list-right">
                    <el-button size="small" @click="reserch()"><i class="el-icon-refresh"></i>重置刷新</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="down-table-list">
              <div class="list-box" v-for="(itemList, indexList) of item.list" :key="indexList">
                <div class="list-left-name">
                  {{ indexList + 1 }}.{{ itemList.name }}
                </div>
                <div class="list-right-down">
                  <el-button size="small" type="primary" plain @click="downexcel(itemList.url,itemList)">导出表格
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import excelModule from './excelModule.js'

export default {
  name: "apply",
  components: {},
  data() {
    return {
      activeName: 1,
      arryList: [],
      sexValue: 0,
      monthValue: '',
      semester_id: '',
      searchForm: {
        class_id: '',
        section_id: '',
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      // 1男2女0全部
      sexList: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '男'
        }, {
          value: 2,
          label: '女'
        },
      ],
      statusValue:0,
      statusTearchList:[
        {
          value: 0,
          label: '申请中'
        },
        {
          value: 1,
          label: '完成申请'
        }
      ],
      downTiitle: excelModule.data,
      className: [],
      yearList: []
    }
  },
  watch:{
    getPower(){
      this.reserch()
    }
  },
  created() {
    this.yearListFn()
  },
  mounted() {
  },
  methods: {
    // 导出excel文件
    downexcel(url, item) {
      let request = `${this.$BASE_URL}/admin/${url}`
      let excelName = item.name
      if (Number(this.activeName) === 1) {
        if (this.monthValue) {
          request = request + '?month=' + this.monthValue
          excelName = this.monthValue + '月' + item.name
        } else {
          this.$message.error('选择导出月份')
          return
        }
      }
      if (Number(this.activeName) === 2) {
        request = request + '?sex=' + (this.sexValue ? this.sexValue : 0)+'&semester_id='+this.semester_id
      }
      if (Number(this.activeName) === 3) {
        console.log('this.getPower:', this.getPower)
        request = `${request}?class_id=${this.searchForm.class_id}&section_id=${this.searchForm.section_id}&month=${this.monthValue}`
        if(this.monthValue){
          excelName = `${this.monthValue}月${item.name}`
        }
        if(this.monthValue && this.searchForm.class_id&&this.className[1]){
          excelName = `${this.monthValue}月${this.className[1]}${item.name}`
        }
      }
      if (Number(this.activeName) === 4) {
        request = `${request}?class_id=${this.searchForm.class_id}&section_id=${this.searchForm.section_id}&is_examine=${this.statusValue}`
      }
      this.$http({
        method: 'get',
        url: request,
        responseType: 'arraybuffer'
      })
          .then(
              function (response) {
                // let filename = this.editForm.phone + '物料（明细）.xlsx'
                // 导出的名称
                this.fileDownload(response.data, excelName)
              }.bind(this)
          )
          .catch(
              function (error) {
                alert('网络请求出错')
              }
          )
    },
    fileDownload(data, fileName) {
      let blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      let filename = fileName + '.xlsx' || 'filename.xlsx'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        let blobURL = window.URL.createObjectURL(blob)
        let tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }

      // const aLink = document.createElement("a");
      // let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
      // aLink.href = URL.createObjectURL(blob)
      // aLink.setAttribute('download', '哈哈哈哈' + '.xlsx') // 设置下载文件名称
      // aLink.click()
      // this.$refs.loadElement.appendChild(aLink)
    },
    yearListFn(){
      this.$fetch(this.api.setting.semesterIndex, {}).then((response) => {
        for (let i in response.list) {
          if (response.list[i].type === 1) {
            response.list[i].year = response.list[i].year + ' 下学期'
          } else {
            response.list[i].year = response.list[i].year + ' 上学期'
          }
        }
        this.yearList = response.list
      }).catch((err) => {
        console.log(err)
      })
    },
    reserch() {
      if (Number(this.activeName) === 1) {
        this.monthValue = ''
      }
      if (Number(this.activeName) === 2) {
        this.sexValue = 0
        this.semester_id = ''
      }
      if (Number(this.activeName) === 3 || Number(this.activeName) === 4) {
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
        this.searchForm.class_id = ''
        this.searchForm.section_id = ''
      }
      if(Number(this.activeName) === 4){
        this.statusValue = 0
      }
    },
    updateVal(option) {
      console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
      if(option.nameOption){
        this.className = option.nameOption
      }
    },
    getJson(option){
      return JSON.parse(JSON.stringify(option))
    }
  }
}
</script>

<style scoped>
.search-line {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
}

.search-list {
  /*border-bottom: 1px solid #f5f5f5;*/
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.search-list:last-child {
  border-bottom: none;
}

div.v-dropdown-caller.v-dropdown-caller--full-width {
  display: block !important;
}

.search-list-left {
  display: flex;
  align-items: center;
}

.search-list-line {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}

.list-box {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
  cursor: pointer;
}

.list-box:hover {
  background: #cce1fc;
}

.list-left-name {
  flex: 1;
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.down-body {
  padding: 0 10px;
}
</style>
<!--<div  class="list-box" v-for="(item, index) of item.list" :key="index">-->
<!--<div class="list-left-name">-->
<!--  {{item.name}}-->
<!--</div>-->
<!--<div class="list-right-down">-->
<!--  <el-button size="small">导出表格</el-button>-->
<!--</div>-->
<!--</div>-->
